<template>
  <div class="page-header-index-wide">
    <a-row :gutter="12">
      <a-col :sm="24" :md="4" :xl="4">
        <chart-card :loading="loading" title="当日新增预警总数" :total="data1.warningTotal.periodValue | NumberFormat">
          <template slot="footer"
            >环比
            <a-icon
              v-if="data1.warningTotal.moMValue > 0"
              class="m1"
              type="caret-up"
              :style="{ fontSize: '16px', color: '#F52D38' }"
            />
            <a-icon
              v-if="data1.warningTotal.moMValue < 0"
              class="m1"
              type="caret-down"
              :style="{ fontSize: '16px', color: '#90D96C' }"
            />
            <!-- <span class="m1" v-if="data1.warningTotal.moMValue == 0"> -- </span> -->
            <span class="m1" v-if="data1.warningTotal.moMRatio == '-'">--</span>
            <span class="m1" v-else> {{ Math.abs(data1.warningTotal.moMRatio) | NumberFormat }}% </span>
            <!-- <span class="m1"> {{ Math.abs(data1.warningTotal.moMRatio) | NumberFormat }}% </span> -->
            <span class="m1"> {{ Math.abs(data1.warningTotal.moMValue) | NumberFormat }}</span></template
          >
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="4" :xl="4">
        <chart-card
          :loading="loading"
          title="当日预警推送总数"
          :total="data1.warningGjzxTotal.periodValue | NumberFormat"
        >
          <template slot="footer"
            >环比
            <a-icon
              v-if="data1.warningGjzxTotal.moMValue > 0"
              class="m1"
              type="caret-up"
              :style="{ fontSize: '16px', color: '#F52D38' }"
            />
            <a-icon
              v-if="data1.warningGjzxTotal.moMValue < 0"
              class="m1"
              type="caret-down"
              :style="{ fontSize: '16px', color: '#90D96C' }"
            />
            <!-- <span class="m1" v-if="data1.warningGjzxTotal.moMValue == 0"> -- </span>
            <span class="m1"> {{ Math.abs(data1.warningGjzxTotal.moMRatio) | NumberFormat }}% </span> -->
            <span class="m1" v-if="data1.warningGjzxTotal.moMRatio == '-'">--</span>
            <span class="m1" v-else> {{ Math.abs(data1.warningGjzxTotal.moMRatio) | NumberFormat }}% </span>
            <span class="m1"> {{ Math.abs(data1.warningGjzxTotal.moMValue) | NumberFormat }}</span></template
          >
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="4" :xl="4">
        <chart-card
          :loading="loading"
          title="当日导入预警总数"
          :total="data1.warningGaTotal.periodValue | NumberFormat"
        >
          <template slot="footer"
            >环比
            <a-icon
              v-if="data1.warningGaTotal.moMValue > 0"
              class="m1"
              type="caret-up"
              :style="{ fontSize: '16px', color: '#F52D38' }"
            />
            <a-icon
              v-if="data1.warningGaTotal.moMValue < 0"
              class="m1"
              type="caret-down"
              :style="{ fontSize: '16px', color: '#90D96C' }"
            />
            <!-- <span class="m1" v-if="data1.warningGaTotal.moMValue == 0"> -- </span>
            <span class="m1"> {{ Math.abs(data1.warningGaTotal.moMRatio) | NumberFormat }}% </span> -->
            <span class="m1" v-if="data1.warningGaTotal.moMRatio == '-'">--</span>
            <span class="m1" v-else> {{ Math.abs(data1.warningGaTotal.moMRatio) | NumberFormat }}% </span>
            <span class="m1"> {{ Math.abs(data1.warningGaTotal.moMValue) | NumberFormat }}</span></template
          >
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="4" :xl="4">
        <chart-card
          :loading="loading"
          title="当日电话劝阻总数"
          :total="data1.phoneDissuadeTotal.periodValue | NumberFormat"
        >
          <template slot="footer"
            >环比
            <a-icon
              v-if="data1.phoneDissuadeTotal.moMValue > 0"
              class="m1"
              type="caret-up"
              :style="{ fontSize: '16px', color: '#F52D38' }"
            />
            <a-icon
              v-if="data1.phoneDissuadeTotal.moMValue < 0"
              class="m1"
              type="caret-down"
              :style="{ fontSize: '16px', color: '#90D96C' }"
            />
            <!-- <span class="m1" v-if="data1.phoneDissuadeTotal.moMValue == 0"> -- </span>
            <span class="m1"> {{ Math.abs(data1.phoneDissuadeTotal.moMRatio) | NumberFormat }}% </span> -->
            <span class="m1" v-if="data1.phoneDissuadeTotal.moMRatio == '-'">--</span>
            <span class="m1" v-else> {{ Math.abs(data1.phoneDissuadeTotal.moMRatio) | NumberFormat }}% </span>
            <span class="m1"> {{ Math.abs(data1.phoneDissuadeTotal.moMValue) | NumberFormat }}</span></template
          >
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="4" :xl="4">
        <chart-card
          :loading="loading"
          title="当日短信劝阻总数"
          :total="data1.smsDissuadeTotal.periodValue | NumberFormat"
        >
          <template slot="footer"
            >环比
            <a-icon
              v-if="data1.smsDissuadeTotal.moMValue > 0"
              class="m1"
              type="caret-up"
              :style="{ fontSize: '16px', color: '#F52D38' }"
            />
            <a-icon
              v-if="data1.smsDissuadeTotal.moMValue < 0"
              class="m1"
              type="caret-down"
              :style="{ fontSize: '16px', color: '#90D96C' }"
            />
            <!-- <span class="m1" v-if="data1.smsDissuadeTotal.moMValue == 0"> -- </span>
            <span class="m1"> {{ Math.abs(data1.smsDissuadeTotal.moMRatio) | NumberFormat }}% </span> -->
            <span class="m1" v-if="data1.smsDissuadeTotal.moMRatio == '-'">--</span>
            <span class="m1" v-else> {{ Math.abs(data1.smsDissuadeTotal.moMRatio) | NumberFormat }}% </span>
            <span class="m1"> {{ Math.abs(data1.smsDissuadeTotal.moMValue) | NumberFormat }}</span></template
          >
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="4" :xl="4">
        <chart-card
          :loading="loading"
          title="当日上门劝阻总数"
          :total="data1.comeHomeDissuadeTotal.periodValue | NumberFormat"
        >
          <template slot="footer"
            >环比
            <a-icon
              v-if="data1.comeHomeDissuadeTotal.moMValue > 0"
              class="m1"
              type="caret-up"
              :style="{ fontSize: '16px', color: '#F52D38' }"
            />
            <a-icon
              v-if="data1.comeHomeDissuadeTotal.moMValue < 0"
              class="m1"
              type="caret-down"
              :style="{ fontSize: '16px', color: '#90D96C' }"
            />
            <!-- <span class="m1" v-if="data1.comeHomeDissuadeTotal.moMValue == 0"> -- </span>
            <span class="m1"> {{ Math.abs(data1.comeHomeDissuadeTotal.moMRatio) | NumberFormat }}% </span> -->
            <span class="m1" v-if="data1.comeHomeDissuadeTotal.moMRatio == '-'">--</span>
            <span class="m1" v-else> {{ Math.abs(data1.comeHomeDissuadeTotal.moMRatio) | NumberFormat }}% </span>
            <span class="m1"> {{ Math.abs(data1.comeHomeDissuadeTotal.moMValue) | NumberFormat }}</span></template
          >
        </chart-card>
      </a-col>
    </a-row>
    <a-row :gutter="12">
      <a-col :span="24">
        <a-card title="新增预警趋势" id="ExportArea1">
          <div class="timeBox" slot="extra">
            <span class="timeItem" :class="active2Arr[0] ? 'active' : ''" @click="onSec2Click(1)">当天</span>
            <span class="timeItem" :class="active2Arr[1] ? 'active' : ''" @click="onSec2Click(2)">近一周</span>
            <span class="timeItem" :class="active2Arr[2] ? 'active' : ''" @click="onSec2Click(3)">近一月</span>
            <a-range-picker
              class="timeItem"
              v-model="rangeTime2"
              valueFormat="YYYY-MM-DD"
              :allowClear="true"
              :disabled-date="disabledDate2"
              @change="onTimeSec2Change"
              @calendarChange="calendarPriceRangeChange($event, 'selectPriceDate2')"
            />
            <a-icon
              type="download"
              style="color:#BFBFBF;font-size: 20px;margin-left:20px;"
              @click="download('#ExportArea1', '新增预警趋势')"
            />
          </div>
          <smLine style="height:420px;" v-if="data2.length > 0" :data="data2" :color="['#1F93FF']" splitLine />
          <p class="noData" v-else><a-empty /></p>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="12">
      <a-col :span="24">
        <a-card title="预警推送趋势" id="ExportArea2">
          <div class="timeBox" slot="extra">
            <span class="timeItem" :class="active3Arr[0] ? 'active' : ''" @click="onSec3Click(1)">当天</span>
            <span class="timeItem" :class="active3Arr[1] ? 'active' : ''" @click="onSec3Click(2)">近一周</span>
            <span class="timeItem" :class="active3Arr[2] ? 'active' : ''" @click="onSec3Click(3)">近一月</span>
            <a-range-picker
              class="timeItem"
              v-model="rangeTime3"
              valueFormat="YYYY-MM-DD"
              :allowClear="true"
              :disabled-date="disabledDate3"
              @change="onTimeSec3Change"
              @calendarChange="calendarPriceRangeChange($event, 'selectPriceDate3')"
            />
            <a-icon
              type="download"
              style="color:#BFBFBF;font-size: 20px;margin-left:20px;"
              @click="download('#ExportArea2', '预警推送趋势')"
            />
          </div>
          <smLine style="height:420px;" v-if="data3.length > 0" :data="data3" :color="['#1F93FF']" splitLine />
          <p class="noData" v-else><a-empty /></p>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="12">
      <a-col :span="24">
        <a-card title="所属区域已劝阻概况数量统计" id="ExportArea3">
          <div>
            <a-radio-group @change="onQZGKChange" v-model="tabIndex">
              <a-radio-button value="1">
                电话预警
              </a-radio-button>
              <a-radio-button value="2">
                短信预警
              </a-radio-button>
              <a-radio-button value="3">
                上门预警
              </a-radio-button>
              <a-radio-button value="4">
                账号处置
              </a-radio-button>
            </a-radio-group>
          </div>
          <div class="timeBox" slot="extra">
            <span class="timeItem" :class="active4Arr[0] ? 'active' : ''" @click="onSec4Click(1)">当天</span>
            <span class="timeItem" :class="active4Arr[1] ? 'active' : ''" @click="onSec4Click(2)">近一周</span>
            <span class="timeItem" :class="active4Arr[2] ? 'active' : ''" @click="onSec4Click(3)">近一月</span>
            <a-range-picker
              class="timeItem"
              v-model="rangeTime4"
              valueFormat="YYYY-MM-DD"
              :allowClear="true"
              @change="onTimeSec4Change"
            />
            <a-icon
              type="download"
              style="color:#BFBFBF;font-size: 20px;margin-left:20px;"
              @click="download('#ExportArea3', '所属区域已劝阻概况数量统计')"
            />
          </div>
          <!-- <bar :dataSource="barData" :height="420" /> -->
          <smRankBar style="width:85vw;height:420px;" v-if="data4.length > 0" :data="data4" :barWidth="50"></smRankBar>
          <p class="noData" v-else><a-empty /></p>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="12">
      <a-col :span="24">
        <a-card title="预警推送所属区域数量统计" id="ExportArea4">
          <div class="timeBox" slot="extra">
            <span class="timeItem" :class="active5Arr[0] ? 'active' : ''" @click="onSec5Click(1)">当天</span>
            <span class="timeItem" :class="active5Arr[1] ? 'active' : ''" @click="onSec5Click(2)">近一周</span>
            <span class="timeItem" :class="active5Arr[2] ? 'active' : ''" @click="onSec5Click(3)">近一月</span>
            <a-range-picker
              class="timeItem"
              v-model="rangeTime5"
              valueFormat="YYYY-MM-DD"
              :allowClear="true"
              @change="onTimeSec5Change"
            />
            <a-icon
              type="download"
              style="color:#BFBFBF;font-size: 20px;margin-left:20px;"
              @click="download('#ExportArea4', '预警推送所属区域数量统计')"
            />
          </div>
          <smRankBar style="width:85vw;height:420px;" v-if="data5.length > 0" :data="data5" :barWidth="50"></smRankBar>
          <p class="noData" v-else><a-empty /></p>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import moment from 'moment'
import exportHandle from '@/utils/export-util/pdf-canvas'
import smLine from '@/components/echarts/smLine.vue'
import smRankBar from '@/components/echarts/smRankBar.vue'
import ChartCard from '@/components/ChartCard'
import {
  getTodayStatistics,
  getWarningTrend,
  getWarningPushTrend,
  getDissuadedStatistics,
  getWarningPushAreaStatistics
} from '@/api/home/home.js'
export default {
  name: 'IndexChart',
  components: {
    smLine,
    smRankBar,
    ChartCard
  },
  data() {
    return {
      loading: true,
      offsetDays: 86400000 * 365, //最多选择365天【一年】
      data1: {
        warningTotal: { moMValue: 0 },
        warningGjzxTotal: { moMValue: 0 },
        warningGaTotal: { moMValue: 0 },
        phoneDissuadeTotal: { moMValue: 0 },
        smsDissuadeTotal: { moMValue: 0 },
        comeHomeDissuadeTotal: { moMValue: 0 }
      },
      data2: [],
      data3: [],
      data4: [],
      data5: [],
      params2: {
        dateTimeType: 'TODAY', //默认是当日
        startTime: undefined,
        endTime: undefined
      },
      params3: {
        dateTimeType: 'TODAY', //默认是当日
        startTime: undefined,
        endTime: undefined
      },
      params4: {
        dateTimeType: 'TODAY', //默认是当日
        startTime: undefined,
        endTime: undefined
      },
      params5: {
        dateTimeType: 'TODAY', //默认是当日
        startTime: undefined,
        endTime: undefined
      },
      active2Arr: [true, false, false],
      active3Arr: [true, false, false],
      active4Arr: [true, false, false],
      active5Arr: [true, false, false],
      rangeTime2: undefined,
      rangeTime3: undefined,
      rangeTime4: undefined,
      rangeTime5: undefined,
      selectPriceDate2: '',
      selectPriceDate3: '',
      tabIndex: '1', //默认选中第一个
      data4Obj: {}
    }
  },
  created() {},
  mounted() {
    this.getData1()
    this.getData2()
    this.getData3()
    this.getData4()
    this.getData5()
  },
  methods: {
    moment,
    getData1() {
      getTodayStatistics()
        .then(res => {
          if (res.success) {
            this.data1 = res.result
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.loading = false
        })
    },
    getData2() {
      getWarningTrend(this.params2)
        .then(res => {
          if (res.success) {
            this.data2 = []
            let data = res.result
            let list = []
            if (data != null && data.length > 0) {
              data.map(item => {
                list.push({
                  product: item.date,
                  数量: item.count
                })
              })
              this.data2 = list
            }
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.loading = false
        })
    },
    getData3() {
      getWarningPushTrend(this.params3)
        .then(res => {
          if (res.success) {
            this.data3 = []
            let data = res.result
            let list = []
            if (data != null && data.length > 0) {
              data.map(item => {
                list.push({
                  product: item.date,
                  '数量': item.count
                })
              })
              this.data3 = list
            }
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.loading = false
        })
    },
    getData4() {
      getDissuadedStatistics(this.params4)
        .then(res => {
          if (res.success) {
            this.data4Obj = res.result
            if (this.data4Obj != null) {
              this.setData()
            }
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.loading = false
        })
    },
    setData() {
      this.data4 = []
      let list = []
      if (this.data4Obj.phoneWarning != null && this.data4Obj.phoneWarning.length > 0 && this.tabIndex == 1) {
        this.data4Obj.phoneWarning.map(item => {
          list.push({
            product: item.typeName,
            '数量': item.count
          })
        })
      }
      if (this.data4Obj.smsWarning != null && this.data4Obj.smsWarning.length > 0 && this.tabIndex == 2) {
        this.data4Obj.smsWarning.map(item => {
          list.push({
            product: item.typeName,
            '数量': item.count
          })
        })
      }
      if (this.data4Obj.comeHomeWarning != null && this.data4Obj.comeHomeWarning.length > 0 && this.tabIndex == 3) {
        this.data4Obj.comeHomeWarning.map(item => {
          list.push({
            product: item.typeName,
            '数量': item.count
          })
        })
      }
      if (this.data4Obj.accountDisposal != null && this.data4Obj.accountDisposal.length > 0 && this.tabIndex == 4) {
        this.data4Obj.accountDisposal.map(item => {
          list.push({
            product: item.typeName,
            '数量': item.count
          })
        })
      }
      console.log(list)
      this.data4 = list
    },
    getData5() {
      getWarningPushAreaStatistics(this.params5)
        .then(res => {
          if (res.success) {
            this.data5 = []
            let data = res.result
            let list = []
            if (data != null && data.length > 0) {
              data.map(item => {
                list.push({
                  product: item.typeName,
                  '数量': item.count
                })
              })
              this.data5 = list
            }
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.loading = false
        })
    },
    onSec2Click(num) {
      // console.log(num)
      if (num == 1) {
        this.params2.dateTimeType = 'TODAY'
      }
      if (num == 2) {
        this.params2.dateTimeType = 'SEVEN_DAY'
      }
      if (num == 3) {
        this.params2.dateTimeType = 'ONE_MONTH'
      }
      this.active2Arr.forEach((item, index) => {
        this.$set(this.active2Arr, index, false)
      })
      this.$set(this.active2Arr, num - 1, true)
      this.rangeTime2 = undefined
      this.params2.startTime = undefined
      this.params2.endTime = undefined
      console.log(this.active2Arr)
      this.getData2()
    },
    onSec3Click(num) {
      if (num == 1) {
        this.params3.dateTimeType = 'TODAY'
      }
      if (num == 2) {
        this.params3.dateTimeType = 'SEVEN_DAY'
      }
      if (num == 3) {
        this.params3.dateTimeType = 'ONE_MONTH'
      }
      this.active3Arr.forEach((item, index) => {
        this.$set(this.active3Arr, index, false)
      })
      this.$set(this.active3Arr, num - 1, true)
      this.rangeTime3 = undefined
      this.params3.startTime = undefined
      this.params3.endTime = undefined
      this.getData3()
    },
    onSec4Click(num) {
      if (num == 1) {
        this.params4.dateTimeType = 'TODAY'
      }
      if (num == 2) {
        this.params4.dateTimeType = 'SEVEN_DAY'
      }
      if (num == 3) {
        this.params4.dateTimeType = 'ONE_MONTH'
      }
      this.active4Arr.forEach((item, index) => {
        this.$set(this.active4Arr, index, false)
      })
      this.$set(this.active4Arr, num - 1, true)
      this.rangeTime4 = undefined
      this.params4.startTime = undefined
      this.params4.endTime = undefined
      this.getData4()
    },
    onSec5Click(num) {
      if (num == 1) {
        this.params5.dateTimeType = 'TODAY'
      }
      if (num == 2) {
        this.params5.dateTimeType = 'SEVEN_DAY'
      }
      if (num == 3) {
        this.params5.dateTimeType = 'ONE_MONTH'
      }
      this.active5Arr.forEach((item, index) => {
        this.$set(this.active5Arr, index, false)
      })
      this.$set(this.active5Arr, num - 1, true)
      this.rangeTime4 = undefined
      this.rangeTime5 = undefined
      this.params5.startTime = undefined
      this.params5.endTime = undefined
      this.getData5()
    },
    onTimeSec2Change(date, dateString) {
      this.params2.startTime = dateString[0]
      this.params2.endTime = dateString[1]
      this.params2.dateTimeType = 'CUSTOMIZE'
      this.active2Arr = [false, false, false]
      if (this.params2.startTime && this.params2.endTime) {
        this.getData2()
      }
    },
    onTimeSec3Change(date, dateString) {
      this.params3.startTime = dateString[0]
      this.params3.endTime = dateString[1]
      this.params3.dateTimeType = 'CUSTOMIZE'
      this.active3Arr = [false, false, false]
      if (this.params3.startTime && this.params3.endTime) {
        this.getData3()
      }
    },
    onTimeSec4Change(date, dateString) {
      this.params4.startTime = dateString[0]
      this.params4.endTime = dateString[1]
      this.params4.dateTimeType = 'CUSTOMIZE'
      this.active4Arr = [false, false, false]
      if (this.params4.startTime && this.params4.endTime) {
        this.getData4()
      }
    },
    onTimeSec5Change(date, dateString) {
      this.params5.startTime = dateString[0]
      this.params5.endTime = dateString[1]
      this.params5.dateTimeType = 'CUSTOMIZE'
      this.active5Arr = [false, false, false]
      if (this.params5.startTime && this.params5.endTime) {
        this.getData5()
      }
    },
    //选择开始时间/结束时间
    calendarPriceRangeChange(date, string) {
      this[string] = date[0]
      if (date.length>1) {
        //选择完时间 清空限制
        this[string] = ''
      }
    },
    //根据选择的开始时间/结束时间，动态渲染要禁用的日期
    disabledDate2(current) {
      if (this.selectPriceDate2) {
        let selectV = moment(this.selectPriceDate2, 'YYYY-MM-DD').valueOf()
        // 选择日期不能小于当天，且可选择自定义offsetDays值范围内的天数
        return (
          current > moment(new Date(selectV + this.offsetDays), 'YYYY-MM-DD') ||
          current < moment(new Date(selectV - this.offsetDays), 'YYYY-MM-DD') ||
          current > moment(new Date, 'YYYY-MM-DD')
        )
      } else {
        return current && current > moment().endOf('day')
      }
    },
    //根据选择的开始时间/结束时间，动态渲染要禁用的日期
    disabledDate3(current) {
      if (this.selectPriceDate3) {
        let selectV = moment(this.selectPriceDate3, 'YYYY-MM-DD').valueOf()
        // 选择日期不能小于当天，且可选择自定义offsetDays值范围内的天数
        return (
          current > moment(new Date(selectV + this.offsetDays), 'YYYY-MM-DD') ||
          current < moment(new Date(selectV - this.offsetDays), 'YYYY-MM-DD') ||
          current > moment(new Date, 'YYYY-MM-DD')
        )
      } else {
        return current && current > moment().endOf('day')
      }
    },
    onQZGKChange(e) {
      console.log(e.target.value)
      this.tabIndex = e.target.value
      if (this.data4Obj != null) {
        this.setData()
      }
    },
    // 下载PDF
    download(DomID, filename) {
      let refDom = document.querySelector(DomID)
      this.$nextTick(() => {
        // exportHandle.exportZip(filename)
        exportHandle.exportPDF(refDom, filename)
        // exportHandle.exportImages(refDom, filename)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.page-header-index-wide {
  margin-bottom: 12px;
  > .ant-row {
    margin-top: 12px;
  }
}
/deep/.chart-card-content {
  // display: none;
  height: 0;
}
.chart-card-footer {
  border: none;
}
/deep/.total {
  line-height: 54px;
  height: auto;
  span {
    display: block;
    text-align: center;
  }
}
/deep/.chart-card-footer {
  border: none;
  padding-top: 0;
}
/deep/ .ant-card-head-title {
  font-weight: bold;
}
/deep/ .chart-card-header .meta {
  text-align: center;
}
/deep/ .timeBox {
  .active {
    color: #5bc6f5;
  }
  .timeItem {
    cursor: pointer;
    margin-left: 20px;
  }
}
/deep/ .chart-card-footer .field {
  text-align: center;
}
.m1 {
  margin-left: 10px;
}
.noData {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
</style>
